// 修改标签页组件
/deep/.el-tabs__nav-wrap::after {
    content: none;
}

/deep/.el-tabs__item {
    font-size: 20px !important;
    color    : #333;
}

/deep/.el-tabs__item.is-active {
    color      : #000;
    font-weight: bold;
}

/deep/.el-tabs__item:hover {
    color: #000;
}

/deep/ .el-tabs__active-bar {
    background-color: #e4393c;
    height          : 4px;
}

.banners {
    img {
        border-radius: 10px;
        width        : 100%;
    }
}

/deep/.el-carousel__indicators--outside button {
    background-color: #e4393c;
}

/deep/ .el-carousel__button {
    width        : 10px;
    height       : 10px;
    border-radius: 50%;
}

/deep/.el-carousel__item,
.el-carousel__mask {
    left: -147px;
}

/deep/ .el-carousel__item--card {
    width: 80%;
}

.dind_box {
    height    : 100%;
    overflow-y: auto;
}

// 处理每个小标题 例如精选推荐
.caption {
    font-size    : 20px;
    display      : inline-block;
    cursor       : pointer;
    margin-bottom: 20px;
}

.caption:hover {
    font-weight: bold;
}


// 精选推荐的每一项
.recommendation_items {
    display  : flex;
    flex-wrap: wrap;

    .item {
        margin-bottom: 10px;
        margin-left  : 5px;
        flex         : 0 0 19%;
        width        : 200px;
    }
}

//独家放送标题
.caption2 {
    margin-top: 20px;
}

// 独家放送的每一项
.exclusive {
    display        : flex;
    justify-content: space-between;

    .item {
        flex  : 0 0 33%;
        height: 230px;
    }
}

// 最新音乐的每一项
.new_music {
    display        : flex;
    justify-content: space-between;
    flex-wrap      : wrap;

    .item {
        margin-bottom: 5px;
        flex         : 0 0 33%;
        // background: chocolate;
    }
}


// 歌单小标题位置标题位置
.play_list_box {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    margin-bottom  : 20px;

    .type {
        background-color: #fff;
        border          : 1px solid #ccc;
        color           : #333;
        display         : flex;
        width           : 125px;
        height          : 37px;
        border-radius   : 30px;
        justify-content : center;
        align-items     : center;
        font-size       : 18px;
        box-sizing      : border-box;
        cursor          : pointer;

        &:hover {
            background-color: #ccc;
        }
    }

    .play_list {
        display    : flex;
        align-items: center;

        .type_item {
            padding      : 2px 15px;
            color        : #555;
            border-radius: 20px;
            cursor       : pointer;
            color        : 12px;

            &:hover {
                color: black
            }
        }

        .active {
            color           : #e4393c !important;
            background-color: #f0f0f0;
        }

    }

}

.play_list_content_box {
    display  : flex;
    flex-wrap: wrap;

    .play_list_item {
        margin-left: 15px;
        margin-top : 10px;
    }
}

.fyq {
    display        : flex;
    justify-content: center;
}

// 修改分页器的样色
/deep/ .el-pager li.active {
    color: #e4393c;
}

/deep/ .el-pager li:hover {
    color: #e4393c;
}

/deep/ .el-pagination button:hover {
    color: #e4393c;
}


// 电台页面的样式
// 轮播  跟上个样式一样
// 电台页面的分类
.anchor {
    .anchor_type {
        display           : flex;
        // justify-content: space-between;
        flex-wrap         : wrap;

        .item {
            margin-left  : 20px;
            height       : 30px;
            margin-bottom: 10px;
            text-align   : center;
            line-height  : 30px;
            flex         : 0 14%;
            border-radius: 30px;
            cursor       : pointer;

            &:hover {
                background: #e4393c;
                color     : #fff;
            }

            &:nth-last-child(3*n) {
                margin-left: 0;
            }
        }

        .active {
            background: #e4393c;
            color     : #fff;
        }
    }
}

// 电台页面  电台展示区   展示一部分电台分类推荐的内容  

// 头部区
.title {
    display    : flex;
    align-items: center;
    cursor     : pointer;

    h2 {
        margin : 0;
        padding: 0;
        color  : #333;

        &:hover {
            color: black
        }
    }

    .el-icon-arrow-right {
        padding-top: 2px;
        font-size  : 25px;
    }
}

.title_content {
    margin-top     : 10px;
    display        : flex;
    justify-content: space-between;
    margin-bottom  : 30px;

    .title_content_list {
        flex: 0 18%;
    }
}


// 排行榜页面
.bsb {
    margin-top: 50px;
    display   : flex;

    .img {
        border-radius   : 10px;
        width           : 215px;
        height          : 215px;
        background-color: aqua;
        position        : relative;
        cursor          : pointer;

        .play_icon {
            position     : absolute;
            top          : calc(50% - 20px);
            left         : calc(50% - 20px);
            width        : 40px;
            height       : 40px;
            background   : #fff;
            border-radius: 50%;
            text-align   : center;
            line-height  : 40px;
            font-size    : 30px;
            opacity      : 0;
            color        : #e4393c;

        }

        img {
            width        : 100%;
            border-radius: 10px;
        }

        &:hover .play_icon {
            opacity: 0.9;
        }

    }

    .bsb_item {
        width      : 700px;
        margin-left: 40px;
        cursor     : default;

        .music_item {
            display    : flex;
            line-height: 40px;
            text-align : center;

            &:nth-child(2n) {
                background: #f0f0f0;
            }

            .index {
                flex         : 0 5%;
                // background: #f0f0f0;
            }

            .name {
                flex         : 0 55%;
                // background: firebrick;
                text-align   : initial;
                overflow     : hidden;
                text-overflow: ellipsis;
                white-space  : nowrap;

                span {
                    color: #777;
                }
            }

            .man_name {
                flex         : 0 40%;
                text-align   : end;
                color        : #777;
                // background: fuchsia;
                overflow     : hidden;
                text-overflow: ellipsis;
                white-space  : nowrap;
                padding-right: 10px;
                box-sizing   : border-box;
                cursor       : default;

                span:nth-child(2n-1) {
                    cursor: pointer;

                    &:hover {
                        color: black;
                    }
                }
            }

            &:hover {
                background: #ccc;
            }

            // 前三下标高亮
            .active {
                color: #e4393c;
            }

        }

        .look {
            color  : #777;
            cursor : pointer;
            display: inline-block;
        }
    }
}

.all_toplist {
    display  : flex;
    flex-wrap: wrap;

    .list {
        flex            : 0 19%;
        // height       : 150px;
        margin-right    : 9px;
        margin-bottom   : 20px;

        &:nth-child(2n-1 - 5) {
            margin-right: 0;
        }

        .img {

            position: relative;
            cursor  : pointer;

            img {
                width        : 100%;
                border-radius: 10px;
                // height: 100%;
            }

            .play_count {
                position   : absolute;
                top        : 10px;
                right      : 10px;
                display    : flex;
                align-items: center;
                font-size  : 14px;
                color      : #fff;
                text-shadow: 1px 1px 9px #333;
            }

            .play_icon {
                width        : 40px;
                height       : 40px;
                background   : #fff;
                border-radius: 50%;
                position     : absolute;
                top          : calc(50% - 20px);
                left         : calc(50% - 20px);
                text-align   : center;
                line-height  : 40px;
                font-size    : 30px;
                color        : #e4393c;
                opacity      : 0;
            }

            &:hover .play_icon {
                opacity: 1;
            }
        }

        .list_name {
            margin-top: 10px;
            cursor    : pointer;
            color     : #999;

            &:hover {
                color: #000;
            }
        }
    }

}


// 歌手页面
.Language_type {
    display  : flex;
    margin   : 10px 0;
    flex-wrap: wrap;

    .name {
        flex  : 0 5%;
        cursor: default;
    }

    .language_type {
        flex       : 0 95%;
        display    : flex;
        align-items: center;
        color      : #666;
        flex-wrap  : wrap;

        .language_type_item {
            margin-bottom: 10px;
            border-right : 1px solid #ccc;
            height       : 17px;
            width        : 100px;

            &:last-child {
                border-right: none
            }

            .item {
                margin     : auto;
                flex-wrap  : wrap;
                font-size  : 15px;
                height     : 26px;
                width      : 80px;
                text-align : center;
                line-height: 26px;
                cursor     : pointer;

                &:hover {
                    color: black;
                }
            }

            .active {
                height          : 26px;
                width           : 80px;
                text-align      : center;
                line-height     : 26px;
                // border-right : 1px solid #f0f0f0;
                background      : rgb(253, 245, 245);
                border-radius   : 26px;
                color           : #e4393c;

                &:hover {
                    background: rgb(253, 237, 237);
                    color     : #e4393c;
                }
            }


        }
    }
}

.singers {
    display  : flex;
    flex-wrap: wrap;

    .singer {
        flex        : 0 18%;
        margin-right: 20px;
        flex-wrap   : wrap;

        &:nth-child(5n+5) {
            margin-right: 0px;
        }

        .img {

            // background-color: blue;
            img {
                cursor       : pointer;
                border-radius: 10px;
                width        : 100%;
                height       : 140px;
            }
        }

        .wenzi {
            margin: 10px 0;
            cursor: default;
        }
    }
}


// 最新音乐页面
// 新歌速递 和 新碟上架的样式
.new_btn_wrapper {
    // background: #f0f0f0;
    width          : 100%;
    display        : flex;
    justify-content: center;
    margin-bottom  : 40px;

    .new_btn_box {
        // padding: 10px 20px;
        // border-radius: ;
        border       : 1px solid #ccc;
        // background: chocolate;
        border-radius: 30px;
        display      : flex;
        margin       : auto;

        div {
            padding      : 6px 40px;
            height       : 100%;
            width        : 100%;
            border-radius: 30px;
            cursor       : pointer;
            color        : #333;

            &:hover {
                background: #f0f0f0;
            }
        }

        .active {
            color     : #fff !important;
            background: rgb(187, 187, 187) !important;
        }
    }
}

// tab选项  和  全部按钮的样式
.new_btn_music_box , .new_btn_zj_box{
    .btn_tag {
        display        : flex;
        justify-content: space-between;

        .tag {
            flex           : 0 30%;
            // background: #ccc;
            display        : flex;
            justify-content: space-between;

            div {
                font-size: 18px;
                color    : #555;
                cursor   : pointer;

                &:hover {
                    color: #000;
                }
            }

            .active {
                font-weight: bold;
                color      : #000;
            }
        }

        .all_play_btn_box {
            flex              : 0 20%;
            // background     : #ccc;
            display           : flex;
            justify-content   : space-between;

            .all_play_btn {
                padding        : 5px 10px;
                border-radius  : 30px;
                background     : #e4393c;
                display        : flex;
                justify-content: center;
                align-items    : center;
                cursor         : pointer;

                .img {
                    width        : 20px;
                    height       : 20px;
                    // background: ;
                    margin-right : 5px;

                    img {
                        width: 100%;
                    }
                }

                .wenzi {
                    line-height: 20px;
                    color      : #fff;
                }
            }
        }
    }
}

// 音乐列表   的样式
.all_new_music {
    width: 980px;
    box-sizing   : border-box;
    padding-right: 10px;
    margin-top : 10px;
    .new_music_item {
        display    : flex;
        // background : #ccc;
        padding    : 10px 0;
        align-items: center;
        cursor: default;
        &:nth-child(2n-1){
            background: #f0f0f0;
        }
        &:hover{
            background: #cccc;
        }


        .index {
            flex      : 0 5%;
            // background: chocolate;
            text-align: center;
            color: #777;
        }

        .img {
            height    : 78px;
            width     : 78px;
            // background: cornsilk;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            cursor: pointer !important;
            img{
                width: 100%;
                cursor: pointer !important;
            }
            .play_btn{
                cursor: pointer !important;
                position: absolute;
                width: 30px;
                height: 30px;
                background: #fff;
                border-radius: 50%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                display: flex;
                justify-content: center;
                align-items: center;
                opacity: .8;
                .el-icon-caret-right{
                    font-size: 25px;
                    color: #e4393c;

                }
            }
        }

        .music_name_box,
        .singer_name,
        .zj_name_box {
            overflow     : hidden;
            text-overflow: ellipsis;
            white-space  : nowrap;
        }


        .music_name_box {
            flex        : 0 40%;
            // background  : cornflowerblue;
            box-sizing  : border-box;
            padding-left: 10px;
            .music_alia{
                color: #777;
            }

        }

        .singer_name {
            flex      : 0 20%;
            // background: cyan;
            color: #444;
        }

        .zj_name_box {
            flex      : 0 20%;
            // background: #666;
            color: #444;
            .zj_alia{
                color: #777;
            }
        }

        .play_time {
            flex      : 0 15%;
            // background: #e4393c;
            text-align: center;
            color: #777;
        }
    }
}

.new_btn_zj_box{
    .content_box{
        margin-top: 20px;
        .content_sm_box{
            display: flex;
            .content_time{
                flex:  0 8%;
                // padding: 0 20px;
                box-sizing: border-box;
                // background-color: antiquewhite;
                writing-mode:tb-rl;
                // text-align: center;
                font-size: 20px;
                line-height: 80px;
                letter-spacing:3px;
                cursor: default;
            }
            .content{
                flex: 0 92%;
                display: flex;
                // justify-content: space-between;
                padding: 0 10px;
                flex-wrap: wrap;
                .content_item{
                    margin-right: 10px;
                    margin-bottom: 10px;
                    flex: 0 24%;
                    // background: burlywood;
                    &:nth-child(4n+4){
                        margin-right: 0;
                    }
                }
            }
        }
    }
}